<template>
    <div>
        <button @click="change(false)">-</button>
        <span>{{count}}</span>
        <button @click="change(true)">+</button>
    </div>
</template>
<script>
import {mapActions} from 'vuex'
import debounce from '@/utils/util'
export default {
    name:'shopCount',
    props:{
        count:{
            type:Number,
            default:1
        },
        shopid:{
            type:Number
        }
    },
    methods:{
        ...mapActions('shopCar',['addCar','removeCar','delCar']),
        change:debounce(function(flag){
            if(flag){
                //true
                this.addCar({
                    shop_id:this.shopid
                })
            }else{
                //false
                if(this.count <= 1){
                    //删除
                    this.delCar({
                        shop_id:this.shopid
                    })
                }else{
                    //减去数量
                    this.removeCar({
                        shop_id:this.shopid
                    })
                }
            }
        },500)
    }
}
</script>
<style lang="scss" scoped>
    .count{
        width:34px;
    }
</style>
